<template>
	<el-drawer
	  v-model="dialog.visible"
	  :title="dialog.title"
	  append-to-body
	  @close="closeDialog"
	  :close-on-click-modal="false"
	  size="750"
	>
	</el-drawer>
</template>

<script lang="ts" setup>
	
	import { ref } from "vue";
	import DatasourceAPI from "@/api/biz/datasource";
	import DataTaskAPI from "@/api/biz/datatask";
	
	
	import { Plus, Delete, Edit, Rank, Check, Document, Tools } from '@element-plus/icons-vue';
	import draggable from 'vuedraggable';
	import type {FormRules } from 'element-plus'
	import { ElMessage } from "element-plus";
	import { reactive } from "vue";
	import { onMounted } from "vue";
	import { validateCronExpression } from '@/utils/validator';
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	
	const editRow=ref<any>();
	
	async function openDialog(_row?: any) {
		dialog.value.visible=true;
		dialog.value.title=_row.name+' >> 运行日志';
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog')
		resetForm();
	}
	
	function resetForm() {
		editRow.value={};
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	// 常用CRON表达式
	const commonCrons = [
		{ label: '每分钟', value: '0 * * * * ?' },
		{ label: '每小时', value: '0 0 * * * ?' },
		{ label: '每天0点', value: '0 0 0 * * ?' },
		{ label: '每周一0点', value: '0 0 0 ? * MON' },
		{ label: '每月1号0点', value: '0 0 0 1 * ?' },
	];
	
	// 定义类型接口
	interface CronDialogData {
		visible: boolean;
		type: 'every' | 'specific' | 'cycle';
		everyUnit: string;
		everyInterval: number;
		specificTime: any;
		specificDateType: string;
		specificDate: any;
		cycleTime: any;
		cycleStart:any;
		cycleEnd: any;
	}
	
	// CRON生成器对话框数据
	const cronDialog = ref<CronDialogData>({
		visible: false,
		type: 'every',
		everyUnit: 'minute',
		everyInterval: 1,
		specificTime: null,
		specificDateType: 'everyday',
		specificDate: null,
		cycleTime: null,
		cycleStart: null,
		cycleEnd: null
	});
	
	// 生成CRON表达式
	const generatedCron = computed(() => {
		const { type, everyUnit, everyInterval, specificTime, specificDateType, specificDate, cycleTime, cycleStart, cycleEnd } = cronDialog.value;
		
		let expression = '';
		
		switch (type) {
			case 'every':
				switch (everyUnit) {
					case 'minute':
						expression = `0 */${everyInterval} * * * ?`;
						break;
					case 'hour':
						expression = `0 0 */${everyInterval} * * ?`;
						break;
					case 'day':
						expression = `0 0 0 */${everyInterval} * ?`;
						break;
					case 'week':
						expression = `0 0 0 ? * ${everyInterval}`;
						break;
					case 'month':
						expression = `0 0 0 1 */${everyInterval} ?`;
						break;
				}
				break;
				
			case 'specific':
				if (specificTime) {
					const time = new Date(specificTime);
					const seconds = time.getSeconds();
					const minutes = time.getMinutes();
					const hours = time.getHours();
					
					switch (specificDateType) {
						case 'everyday':
							expression = `${seconds} ${minutes} ${hours} * * ?`;
							break;
						case 'workday':
							expression = `${seconds} ${minutes} ${hours} ? * MON-FRI`;
							break;
						case 'weekend':
							expression = `${seconds} ${minutes} ${hours} ? * SAT,SUN`;
							break;
						case 'specific':
							if (specificDate && Array.isArray(specificDate)) {
								const dates = specificDate.map(d => new Date(d).getDate()).join(',');
								expression = `${seconds} ${minutes} ${hours} ${dates} * ?`;
							}
							break;
					}
				}
				break;
				
			case 'cycle':
				if (cycleTime && cycleStart && cycleEnd) {
					const time = new Date(cycleTime);
					const seconds = time.getSeconds();
					const minutes = time.getMinutes();
					const hours = time.getHours();
					
					const start = new Date(cycleStart);
					const end = new Date(cycleEnd);
					const startDay = start.getDate();
					const endDay = end.getDate();
					
					expression = `${seconds} ${minutes} ${hours} ${startDay}-${endDay} * ?`;
				}
				break;
		}
		
		return expression;
	});
	
	// 打开CRON生成器
	const openCronBuilder = () => {
		cronDialog.value.visible = true;
	};
	
	// 应用生成的CRON表达式
	const applyCron = () => {
		if (generatedCron.value) {
			triggerFormData.value.expression = generatedCron.value;
			cronDialog.value.visible = false;
		}
	};
	
	onMounted(() => {
	});

</script>

<style scoped>
	.step-content{
		background-color: aliceblue;
		margin-top: 8px;
		padding: 8px;
		padding-top: 16px;
	}
	
	.title-form_primary {
	    font-style: normal;
	    font-weight: 500;
	    font-size: 14px;
	    color: #1f2329;
	    position: relative;
	    padding-left: 5px;
	}
	.title-form_primary:before {
	  content: "";
	  width: 2px;
	  height: 14px;
	  background: var(--el-color-primary);
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  left: 0;
	}
	
	
	.section-title {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 16px;
	}
	
	
	.param-model-content {
	  padding: 16px;
	  background: var(--el-fill-color-light);
	  border-radius: 4px;
	}
	
	.param-model-content-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 12px 8px;
	  margin-bottom: 8px;
	  background: var(--el-bg-color);
	  border: 1px solid var(--el-border-color-lighter);
	  border-radius: 4px;
	  transition: all 0.3s;
	  
	  &:hover {
	    border-color: var(--el-border-color);
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	  }
	}
	
	.param-info {
	  flex: 1;
	}
	
	.param-name {
	  font-size: 14px;
	  font-weight: 500;
	  color: var(--el-text-color-primary);
	  margin-bottom: 4px;
	}
	
	.param-detail {
	  display: flex;
	  align-items: center;
	  gap: 16px;
	  color: var(--el-text-color-secondary);
	  font-size: 13px;
	}
	
	.param-actions {
	  display: flex;
	  gap: 8px;
	}
	
	.empty-tip {
	  text-align: center;
	  color: var(--el-text-color-secondary);
	  padding: 32px 0;
	}
	
	.drag-handle {
	  cursor: move;
	  margin-right: 8px;
	  color: var(--el-text-color-secondary);
	  
	  &:hover {
	    color: var(--el-text-color-primary);
	  }
	}
	
	.flip-list-move {
	  transition: transform 0.5s;
	}
	
	.no-move {
	  transition: transform 0s;
	}
	
	.ghost {
	  opacity: 0.5;
	  background: #c8ebfb;
	}
	
	.sql-editor-container {
		margin-bottom: 16px;
		border: 1px solid var(--el-border-color-light);
		border-radius: 4px;
		overflow: hidden;
	
		.sql-editor {
			height: 200px;
			border-radius: 4px;
		}
	
		.sql-tips {
			padding: 8px;
			background-color: var(--el-bg-color-page);
			border-top: 1px solid var(--el-border-color-light);
		}
	}
	
	.cron-tips {
	  margin-top: 8px;
	  font-size: 12px;
	  color: var(--el-text-color-secondary);
	  
	  p {
	    margin: 4px 0;
	  }
	}
	
	.cron-tag {
	  margin-right: 8px;
	  margin-bottom: 8px;
	  cursor: pointer;
	  
	  &:hover {
	    opacity: 0.8;
	  }
	}
	
	.cron-preview {
	  margin-top: 16px;
	  padding: 12px;
	  background: var(--el-fill-color-light);
	  border-radius: 4px;
	  
	  .expression {
	    color: var(--el-color-primary);
	    font-weight: bold;
	    margin-left: 8px;
	  }
	}
</style>